// 直接yarn start可直接运行本题
import { init } from 'snabbdom/src/package/init';
import { h } from 'snabbdom/src/package/h';
import { styleModule } from 'snabbdom/src/package/modules/style';
import { classModule } from 'snabbdom/src/package/modules/class';
import { eventListenersModule } from 'snabbdom/src/package/modules/eventlisteners';
import sortNode from './tab';
import listNode from './list';
import './index.css';

let oldNode = document.querySelector('#root');

const patch = init([styleModule, eventListenersModule, classModule]);

const title = h('h1', 'Top 10 movies');

const vnode = () => {
  return h('div#root', {
    style: {
      margin: '0 auto 2em auto',
      maxWidth: '42em'
    }
  }, [
    title,
    sortNode(),
    listNode()
  ])
};

export const render = () => {
  oldNode = patch(oldNode, vnode());
}

render();
